<template>
  <div class="va-container">
    <div
      class="textarea-con"
      :class="{'validate-err': errors.has('companyIntroduce')}"
      style="margin-bottom: 10px;"
    >
      <label data-content="会员单位情况简介*">会员单位情况简介*&nbsp;&nbsp;&nbsp;<span style="color: #C0C0C0;">不超过600字</span></label>
      <textarea
        rows="3"
        class="width-full"
        v-model="otherInfo.companyIntroduce"
        v-validate="'required|max:600'"
        name="companyIntroduce"
      ></textarea>
    </div>
    <div
      class="material-textfield green width-full"
      :class="{'validate-err': errors.has('companyPrincipalName')}"
    >
      <input
        type="text"
        required
        v-model="otherInfo.companyPrincipalName"
        v-validate="'required'"
        name="companyPrincipalName"
      />
      <label data-content="单位负责人*"></label>
    </div>
    <!-- 上传会员申请盖章附件 -->
    <div
      class="flex-row vip-upload"
      :class="{'validate-err': !(otherInfo.attachment && otherInfo.attachment.length > 0)}"
    >
      <label data-content="上传附件">上传加盖企业公章的会员申请*</label>
      <file-upload
        ref="upload"
        :file-list="fileList"
        v-model="otherInfo.attachment"
      >
        <el-button
          slot="trigger"
          class="width-200"
        >选取文件</el-button>
        <span
          slot="tip"
          class="el-upload__tip"
        >上传提示：填写完会员申请信息后，请下载“会员申请表”后填写单位意见,签字加盖企业公章后上传</span>
      </file-upload>
    </div>
    <!-- 上传单位营业执照附件 -->
    <div
      class="flex-row vip-upload"
      :class="{'validate-err': !(otherInfo.attachment && otherInfo.attachment.length > 0)}"
    >
      <label data-content="上传附件">上传加盖公章的单位营业执照*</label>
      <file-upload
        ref="upload"
        :file-list="fileList"
        action="/mscs/user/fileUpload"
        v-model="otherInfo.license"
      >
        <el-button
          slot="trigger"
          class="width-200"
        >选取文件</el-button>
        <span
          slot="tip"
          class="el-upload__tip"
        >上传提示:请上传加盖企业公章的营业执照扫描件</span>
      </file-upload>
    </div>
  </div>
</template>

<script>
export default {
  title: "会员单位其他信息",
  name: "vipunit-other-info",
  data() {
    return {
      otherInfo: {},
      fileList: [],
      fileListLicense: []
    };
  },
  props: {
    data: {}
  },
  methods: {
    // 预览
    priview() {
      this.$emit("priview");
    },
    // 营业执照完
    confirm() {
      this.$emit("comfirm");
    },
    validate() {
      return this.$validator.validateAll();
    },
    setInit() {
      if (
        typeof this.data.attachment === "string" &&
        this.data.attachment.length > 20
      ) {
        let files = JSON.parse(this.data.attachment);
        if (typeof this.fileList === "string") {
          files = JSON.parse(this.fileList);
        }
        files.forEach(item => {
          if (!item.type || item.type === "attachment") {
            this.fileList.push(item);
            this.otherInfo.attachment = this.fileList;
          } else if (item.type === "license") {
            this.fileListLicense.push(item);
            this.otherInfo.license = this.fileListLicense;
          }
        });
      }
    }
  },
  mounted() {
    this.otherInfo = Object.assign({}, this.data);
    this.setInit();
  },
  watch: {
    otherInfo: {
      handler: function(val, oldVal) {
        this.$emit("update:data", this.otherInfo);
      },
      deep: true
    }
  },
  computed: {
    authorization() {
      return this.$store.state.user.token;
    }
  }
};
</script>
<style scoped>
.duigou-con {
  margin-left: 12px;
}
.vip-upload * {
  font-size: 16px;
  color: #666666;
}
.vip-upload > * + * {
  margin-left: 12px;
}
.vip-upload > div {
  padding-bottom: 20px;
}
</style>
